What is CSS opacity?

The CSS opacity property is a great way to set a low opacity on HTML elements making the entire element semi-transparent including all of its children. But what if we only wish to set the opacity on the background color whilst keeping the content (such as text and images) opaque? Here are a few ways to accomplish that:

How to set opacity only to the background color?

Using RGBA color values To set the opacity only to the background color and not the text inside it we can use RGBA color values instead of the opacity property. Because using the opacity property can change the opacity of the text inside the element.

Can opacity be used to add transparency to a background?

Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below). Show demo ❯